package com.catfive.jet_work.feature.styleeditor

import android.annotation.SuppressLint
import android.webkit.WebView
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ListItem
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.viewinterop.AndroidView
import com.catfive.jet_work.R
import com.catfive.jet_work.core.design.component.TopBarIconMenuButton


@Composable
fun StyleEditorRoute(onOpenDrawer: () -> Unit) {
    StyleEditorScreen(onOpenDrawer = onOpenDrawer)
}


@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("0.1", "1", "10")

    Box(modifier = Modifier.fillMaxWidth()) {
        SingleChoiceSegmentedButtonRow(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.Center)
                .padding(start = 8.dp, end = 8.dp, top = 4.dp)
        ) {
            options.forEachIndexed { index, label ->
                SegmentedButton(
                    shape = SegmentedButtonDefaults.itemShape(
                        index = index,
                        count = options.size
                    ),
                    modifier = Modifier.height(34.dp),
                    onClick = { selectedIndex = index },
                    selected = index == selectedIndex,
                    icon = {},
                    label = { Text(label) }
                )
            }
        }
    }

}


@Composable
fun SetButtonStyle() {
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 10.dp),
    ) {
        items(4) {
            Card(
                modifier = Modifier
                    .height(60.dp)
                    .fillMaxWidth()
                    .padding(horizontal = 8.dp, vertical = 2.dp),
                colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainer),
                shape = RoundedCornerShape(12.dp),
            ) {
                Column {
                    Text("123")
                }
            }

        }
    }
}

@SuppressLint("SetJavaScriptEnabled")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun StyleEditorScreen(onOpenDrawer: () -> Unit) {
    val context = LocalContext.current
    val webView = remember {
        WebView(context).apply {
            settings.javaScriptEnabled = true
        }
    }

    Scaffold(topBar = {
        CenterAlignedTopAppBar(
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(0.6f)
            ),
            navigationIcon = {
                TopBarIconMenuButton(onClick = { onOpenDrawer() })
            },
            title = {
                Text("样式编辑", fontSize = 24.sp)
            }
        )
    }
    ) { paddingValue ->
        Surface(modifier = Modifier.padding(paddingValue)) {
            Column {
                AndroidView(
                    factory = { webView },
                    modifier = Modifier.fillMaxHeight(0.6f)
                ) {
                    it.loadDataWithBaseURL(
                        null,
                        """
            <!DOCTYPE html>
            <html>
            <head>
                <style>
                    body { background: #f0f0f0; }
                    h1 { color: blue; }
                </style>
            </head>
            <body>
                <h1 id="title">Hello Compose WebView!</h1>
                <button onclick="updateText()">Click Me</button>
                <script>
                    function updateText() {
                        document.getElementById("title").innerHTML = "Text Updated!";
                    }
                </script>
            </body>
            </html>
            """,
                        "text/html",
                        "UTF-8",
                        null
                    )
                }
                SingleChoiceSegmentedButton()
                SetButtonStyle()
            }

        }
    }
}

